<template>
	<view class="bg">
		<xl-navbar title="Dropdown下拉菜单" fixed shadow></xl-navbar>
		<xl-dropdown :items="items" shadow color="#ff0000" @change="change">
			<template #default="{ item, chooseItem }">
				<view class="slot__capsule">
					<view v-for="(option, index) in item.options" :key="index" @click="chooseItem(item, index)"
						:class="['capsule-item', option.checked && 'capsule-item-checked']">
						<view class="item-text">{{option.label}}</view>
					</view>
				</view>
			</template>
			<!-- <template v-slot:default="{ item, changeResult }">
				<view class="slot__capsule">
					<view v-for="(option, index) in list" :key="index" @click="changeItem(option, item, changeResult)"
						:class="['capsule-item', option==cur && 'capsule-item-checked']">
						<view class="item-text">{{option}}</view>
					</view>
				</view>
			</template> -->
		</xl-dropdown>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const items = ref([
		// label：tab显示文本，name：参数字段名，value：参数默认值，type：类型（column：列展示，capsule：胶囊展示，group：组合展示，slot：使用插槽）必填，options：选项值
		{label: '综合', name: 'sort', value: '1', type: 'column', options: [
			{label:'综合排序',value:'1'},
			{label:'评分排序',value:'2'},
			{label:'销量排序',value:'3'},
		]},
		// multiple: true多选，不写默认单选，多选会显示重置、确定按钮
		{label: '价格', name: 'price', value: ['0~10','11~20'], type: 'capsule', multiple: true, options: [
			{label:'0~10元',value:'0~10'},
			{label:'11~20元',value:'11~20'},
			{label:'21~30元',value:'21~30'},
		]},
		// 插槽模式，<template #default="{ item, chooseItem, changeResult }"> 插槽中传递当前项item，
		// 以及组件中的选项方法chooseItem(item, index)：选择item.options中的第index项的值
		// 如果item项中没有options，值是父组件中自定义的（请求后端获取的列表值），则可以使用changeResult(item, value)，直接设置该项值
		{label: '分类', name: 'category', value: '2', type: 'slot', options: [
			{label:'全部',value:'0'},
			{label:'火锅',value:'1'},
			{label:'烧烤',value:'2'},
			{label:'自助餐',value:'3'},
			{label:'西餐',value:'4'},
			{label:'海鲜',value:'5'},
		]},
		// 组合模式，children：多个参数
		{label: '筛选', type: 'group', children: [
			{label: '门店类型', name: 'type', value: ['factory','brand'], type: 'capsule', multiple: true, options: [
				{label:'工厂店',value:'factory'},
				{label:'合作店',value:'cooperate'},
				{label:'自营店',value:'self'},
				{label:'品牌店',value:'brand'},
				{label:'加盟店',value:'join'},
			]},
			{label: '综合', name: 'sort2', value: '1', type: 'column',  multiple: true, options: [
				{label:'综合排序',value:'1'},
				{label:'评分排序',value:'2'},
				{label:'销量排序',value:'3'},
			]},
			{label: '门店类型', name: 'type2', value: 'factory', type: 'capsule', options: [
				{label:'工厂店',value:'factory'},
				{label:'合作店',value:'cooperate'},
				{label:'自营店',value:'self'},
				{label:'品牌店',value:'brand'},
				{label:'加盟店',value:'join'},
			]},
		]}
	])
	
	const list = ref(['北京','上海','深圳','福州'])
	const cur = ref('福州')
	function changeItem(value, item, changeResult){
		cur.value = value;
		changeResult(item, value)
	}
	
	function change(result){
		console.log(result);
	}
</script>

<style lang="scss" scoped>
	.slot__capsule{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 32rpx 0 34rpx;
		.capsule-item{
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
			background: #f5f5f5;
			.item-text{
				font-size: 13px;
				color: #333333;
			}
			&.capsule-item-checked{
				background: red;
				.item-text{
					color: #fff;
				}
			}
		}
	}
</style>